<template>
  <my-header v-if="userStore.isShowHeader"></my-header>
  <div class="flex justify-between pr-6 content" :class="computedContentStyle">
    <div
      class="nav-left"
      v-if="userStore.showMenu"
      :class="computedNavLeftStyle"
    >
      <a-menu
        mode="inline"
        theme="light"
        :inline-collapsed="isCollapsed"
        v-model:selectedKeys="selectedKeys"
        @click="handleClick"
        class="w-full layout-menu"
      >
        <Menu :menuList="routerList"></Menu>
      </a-menu>
    </div>
    <div
      class="my-6 ml-6"
      :style="{
        width: userStore.showMenu ? '' : '100%'
      }"
      :class="[...computedRoutePathStyle, computedNavRightStyle]"
    >
      <router-view @routerChange="routerChange" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import { useRouter } from 'vue-router'
import { useRouters } from '@/hooks/useRouters'
import MyHeader from '@/layouts/components/MyHeader.vue'
import { useInfoStore } from '@/store'
// import Menu from '../components/NewMenu.vue'
import { useCollapsed } from '@/hooks/useCollapsed'
const router = useRouter()
const selectedKeys = ref<string[]>([])

const computedRoutePathStyle = computed((): string[] => {
  const path = router.currentRoute.value.path
  const flag = path === '/'
  const rightBc = ['right', 'p-6']
  return flag ? ['home', ...rightBc] : ['', ...rightBc]
})

const computedContentStyle = computed(() => {
  return userStore.isShowHeader ? 'h-[calc(100%-60px)]' : 'h-full'
})

// const home = () => {
//   router.push('/')
//   routerChange('/')
// }
const {
  isCollapsed,
  computedNavLeftStyle,
  computedNavRightStyle
  // onCollapsed
} = useCollapsed()

onMounted(() => {
  selectedKeys.value = [router.currentRoute.value.path]
})
watch(
  () => router.currentRoute.value.path,
  () => {
    selectedKeys.value = [router.currentRoute.value.path]
  }
)

const routerList = ref<any[]>([
  {
    menuName: '首页',
    path: '/',
    children: [],
    menuId: 0,
    menuType: 'C'
  }
])
// 个人信息

const { getRouters } = useRouters()

const getRouterFun = async () => {
  const data = await getRouters()
  routerList.value = [...routerList.value, ...data]
  userStore.getRouters(routerList.value)
}
const userStore = useInfoStore()

const handleClick: MenuProps['onClick'] = (menuInfo: any) => {
  router.push(menuInfo.key as string)
}

const isNew = computed(() => {
  return userStore.isNew
})

watch(
  () => isNew.value,
  () => {
    if (isNew.value) {
      getRouterFun()
      selectedKeys.value = []
    }
  }
)
const routerChange = (path: string) => {
  selectedKeys.value = [path]
}

getRouterFun()
</script>

<style scoped lang="less">
// @import '../../style/nav.less';

.content {
  // background-color: red;
}
</style>
